<template>
	<view class="page_passWord">
		<view class="list">
			<view class="item">
				<m-input type="password" clearable v-model="parmas.newPwd01" placeholder="请输入新密码" :maxLength="12" :focus="true"></m-input>
			</view>
			<view class="item">
				<m-input type="password" clearable v-model="parmas.newPwd" placeholder="请输入新密码" :maxLength="12" :focus="true"></m-input>
			</view>
		</view>
		<view class="tips">密码长度为6-12位，可由数字、字母组成，字母区分大小写</view>
		<view class="onClick" @click="onClick">确认添加</view>
		<uni-popup ref="popup" type="message">
		    <uni-popup-message type="success" message="密码添加成功" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import mInput from '@/components/m-input/m-input.vue'
	import graceChecker from '@/common/graceChecker.js'
	import formRuleConfig from '@/config/formRule.config.js'
	import { mapState } from "vuex";
	export default {
		components: {
			mInput,
		},
		data() {
			return {
				parmas:{
					newPwd01: "",
					newPwd:"",
				}
			}
		},
		computed: {
			...mapState(["userInfo"]),
		},
		methods:{
			onClick() {
				let that = this;
				let checkRes = graceChecker.check(this.parmas, formRuleConfig.passWordRuleNew);
				if (!checkRes) {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
					return;
				}
				if(this.parmas.newPwd01 === this.parmas.newPwd){
					let obj = {};
					obj.id = that.userInfo.id;
					obj.pass = that.parmas.newPwd;
					that.$api.newPassword(obj).then(res=>{
						if(res.data.code == 200){
							uni.showToast({
								title: "密码添加成功",
								icon: "none"
							});
							let userObj = JSON.parse(JSON.stringify(that.userInfo))
							userObj.havePass = true;
							that.$store.commit("SET_USERINFO", userObj );
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								})
							}, 2000);
							
						}
					}).catch(error=>{
						console.log(error)
					})			
				}else{
					uni.showToast({
						title: "两次密码不一致",
						icon: "none"
					});
				}
			}
		}
	}
</script>

<style scoped>
	page{
		background: #F5F5F5;
	}
	.list{
		padding-top: 40rpx;
	}
	.item {
		width: 100%;
		padding: 30rpx;
		height: 108rpx;
		border-bottom: 2px solid #F5F5F5;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		box-sizing: border-box;
	}
	.tips {
		font-size: 24rpx;
		color: #999999;
		padding: 0 30rpx;
		margin-top: 30rpx;
	}
	.onClick{
		position: fixed;
		bottom: calc(20px + var(--window-bottom));
		left: 30rpx;
		width: 690rpx;
		height: 98rpx;
		background-color: #52aaf8;
		box-shadow: 0px 1px 0px 0px 
			rgba(0, 0, 0, 0.02);
		border-radius: 49rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		line-height: 98rpx;
		text-align: center;
	}
</style>
